<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		.box{
			width: 200px;
			height: 200px;
			border: 1px solid #00f;
		}
		.box div{
			width: 50%;
			height: 50%;
			border: 1px solid #f00;
		}
	</style>
	<body>
		<div id="app">
			<!-- 事件修饰符 -->
			<!-- 阻止事件冒泡 stop-->
			<div @click="f(1)" class="box">
				div1
				<div @click.stop="f(2)">
					div2
					<div @click="f(3)">div3</div>
				</div>
			</div>
			<hr>
			<!-- 元素本身触发 -->
			<!-- 只触发一次 once-->
			<div @click.self.once="f(1)" class="box">
				div1
				<div>
					div2
					<div @click.right.prevent="f(3)">div3</div>
				</div>
			</div>
			<hr>
			<!-- 阻止事件默认行为 -->
			<a @click.prevent="f(4)" href="shopCar.html">购物车</a>
			<hr>
			<!-- 开启事件捕获模式 --> 3 2 1   1 3 2   1 2 3
			<div @click.capture="f(1)" class="box">
				div1
				<div @click.capture="f(2)">
					div2
					<div @click="f(3)">div3</div>
				</div>
			</div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						
					}
				},
				methods:{
					f(i){
						alert('这是div'+i)
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>
